<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图书管理页面</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入VUE库 -->
    <script src="../js/vue.min.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <script src="../js/axios.min.js"></script>

    <style>
        html, body, #app, .el-container {
            height: 100%;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header>
            <el-form :inline="true">
                <el-form-item label="书名，作者，出版社">
                    <el-input v-model="name" placeholder="请输入书名，作者，出版社"></el-input>
                </el-form-item>
                <el-form-item label="出版日期">
                    <el-date-picker v-model="date1" type="date" placeholder="选择日期">
                    </el-date-picker>
                    至
                    <el-date-picker v-model="date2" type="date" placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="doQuery(1)">查询</el-button>
                    <el-button type="primary" @click="openEdit({})">新增</el-button>
                </el-form-item>
            </el-form>
        </el-header>
        <el-main>
            <el-table :data="books" style="width: 100%">
                <el-table-column label="编号" width="50" prop="id"></el-table-column>
                <el-table-column label="书名" prop="bookname"></el-table-column>
                <el-table-column label="出版社" prop="bookpress"></el-table-column>
                <el-table-column label="出版时间" prop="pressdate"></el-table-column>
                <el-table-column label="作者" prop="bookauthor"></el-table-column>
                <el-table-column label="库存" prop="bookcount"></el-table-column>
                <el-table-column label="图片" prop="bookimage">
                    <template slot-scope="book">
                        <el-image :src="castImage(book.row.bookimage)" style="width:70px;height: 100px"
                                  fit="contain"></el-image>
                    </template>
                </el-table-column>


                <el-table-column label="操作">
                    <template slot-scope="book">
                        <el-button size="mini" @click="openEdit(book.row)">编辑</el-button>
                        <el-button size="mini" type="danger" @click="del(book.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-main>
        <el-footer style="text-align: right">
            <el-pagination background layout="prev, pager,next"
                           :total="total" :page-size="size" @current-change="doQuery"></el-pagination>
        </el-footer>
    </el-container>

    <el-dialog title="收货地址" width="80%" :visible.sync="BookFormVisible">
        <el-form>
            <el-form-item label="书名">
                <el-input v-model="editbook.id"></el-input>
            </el-form-item>
            <el-form-item label="编号">
                <el-input v-model="editbook.bookname"></el-input>
            </el-form-item>
            <el-form-item label="出版社">
                <el-input v-model="editbook.bookpress"></el-input>
            </el-form-item>
            <el-form-item label="出版时间">
                <el-date-picker v-model="editbook.pressdate" type="date" placeholder="选择日期"></el-date-picker>
            </el-form-item>
            <el-form-item label="作者">
                <el-input v-model="editbook.bookauthor"></el-input>
            </el-form-item>
            <el-form-item label="库存">
                <el-input v-model="editbook.bookcount" autocomplete="off" type="number"></el-input>
            </el-form-item>
            <el-form-item label="图片">
                <el-upload action="../upload"
                           :show-file-list="false"
                           :on-success="handleAcatarSuccess"
                           :before-upload="beforeAvatarUpload">
                    <el-image :src="castImage(editbook.bookimage)" style="height: 100px;width:70px" fill="contain">
                        <div slot="error" style="height: 100px; width: 70px;line-height: 100px;background-color: #eee">
                            <i class="el-icon-picture-outline" style="vertical-align: middle"></i>
                        </div>
                    </el-image>
                </el-upload>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="save()">确 定</el-button>
        </div>
    </el-dialog>
</div>
<script>
    var v = new Vue({
        el: "#app",
        data: {
            books: [],
            page: 1,
            size: 10,
            total: 0,
            name: '',
            date1: null,
            date2: null,
            BookFormVisible: false,
            editbook: {}
        },
        created() {
            this.query()
        },
        methods: {
            edit(book) {
            },
            del(id) {
                this.$confirm('此操作将永久删除该图书,是否继续?', '提示', {
                    type: 'waring'
                }).then(() => {
                    axios.get("../remove.s?id=" + id).then(res => {
                        if (res.data.code == 1) {
                            this.$message({type: 'success', message: res.data.msg});
                            this.query();
                        } else {
                            this.$message({type: 'error', message: res.data.msg});
                        }
                    })
                })
            },
            query() {
                url = `../queryPage.s?page=${this.page}&size=${this.size}`;
                url += `&name=${this.name}`;
                if (this.date1) {
                    url += `&date1=${this.fmtDate(this.date1)}`;
                }
                if (this.date2) {
                    url += `&date2=${this.fmtDate(this.date2)}`;
                }
                axios.get(url).then(res => {
                    console.log(res);
                    this.books = res.data.rows;
                    this.total = res.data.total;
                })
            },
            doQuery(page) {
                console.log(event);
                this.page = page;
                this.query();
            },
            fmtDate(date) {
                return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
            },
            openEdit(book) {
                this.editbook = book;
                this.BookFormVisible = true;
            },
            save() {
                if (typeof this.editbook.pressdate != 'string') {
                    this.editbook.pressdate = this.fmtDate(this.editbook.pressdate);
                }

                let url = "../saveBook.s";
                let params = new URLSearchParams()
                //params.append("id",this.book.id)
                for (let name in this.editbook) {
                    params.append(name, this.editbook[name]);
                }
                console.log(params)

                axios.post(url, params).then(res => {
                    if (res.data.code == 1) {
                        this.$alert(res.data.msg, '系统提示')
                    } else {
                        this.$message({
                            type: "info",
                            message: res.data.msg
                        });
                        this.BookFormVisible = false;
                    }
                })
            },
            handleAcatarSuccess(res, file) {
                alert(res.data)
                this.editbook.bookimage = res.data;

            },
            beforeAvatarUpload(file) {
                const isJPG = file.type.indexOf("image/") == 0;
                const isLt2M = file.size / 1024 / 1024 < 1;
                if (!isJPG) {
                    this.$message.error('上传头像必须是图片！');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像大小不能超过1MB');
                }

                return isJPG && isLt2M;
            },
            castImage(bookimage) {
                if (bookimage) {


                    if (bookimage.indexOf("upload/") == 0) {

                        return "../" + bookimage;

                    } else {
                        return "../images/" + bookimage;
                    }
                }
            }
        }

    })
</script>

</body>
</html>